<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="545在线，电子雷峰塔，随时补充塔能量！笙歌牌播放器，采用PWA技术，支持智能缓存本地播放，可完全断网使用，由琴梨梨驱动" />
    <meta name="robots" content="noindex">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <link rel="canonical" href="https://545.qinlili.bid/settings" />
    <link rel="manifest" href="./manifest.json">
    <meta name="theme-color" content="#FADCBB">
    <link rel="icon" href="./icon_mono.png">
    <link rel="apple-touch-icon" href="./icon_badminton_mask_small.png.png">
    <meta name="apple-mobile-web-app-title" content="545在线">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <title>545在线-设置</title>
    <link href="./public.css" rel="stylesheet">
    <script>
        document.title = "载入设置中..."
    </script>
    <link crossorigin="anonymous"
        integrity="sha512-tH5CEoO7QorGJK5RZrcKozo5xe0qC0UgOhjkIoqXNVe9ApFAjJRbVFzDfVvdRUSOJ5g2Pw9VzzOBguouzhLoIQ=="
        href="https://lib.baomitu.com/material-components-web/6.0.0/material-components-web.min.css" rel="stylesheet">
    <script crossorigin="anonymous"
        integrity="sha512-5zCl3JhN4Fqq6+irTX1v8J+77hwL54zTbrdl2Dl8YHe+KGcuV14C01u/uWFrSg+kZgOfGMneoUySVHqEgdRaPQ=="
        src="https://lib.baomitu.com/material-components-web/6.0.0/material-components-web.min.js"></script>
    <script src="./lib/base64.js"></script>
    <script src="./lib/long-press.min.js"></script>
    <style>
        @keyframes leftin {
            from {
                margin-left: -100%;
            }

            to {
                margin-left: 0;
            }
        }

        @keyframes rightin {
            from {
                margin-left: 100%;
            }

            to {
                margin-left: 0;
            }
        }

        @keyframes rightout {
            from {
                margin-left: 0;
            }

            to {
                margin-left: 100%;
            }
        }
    </style>
    <style>
        #floatMenuContainer {
            transition: opacity 0.2s ease-in;
            opacity: 0;
            display: none;
            z-index: 9999;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            height: auto;
            width: auto;
            position: fixed;
            background-color: rgba(0, 0, 0, 0.15);
        }

        #floatMenu {
            text-align: center;
            width: 100vw;
            height: 90vh;
            border-radius: 10px 10px 0px 0px;
            backdrop-filter: blur(10px) brightness(100%);
            -webkit-backdrop-filter: blur(10px) brightness(100%);
            background-color: rgba(255, 255, 255, 0.75);
            margin-top: 100vh;
            margin-bottom: 0px;
            margin-left: 0px;
            margin-right: 0px;
            transition: margin-top 0.5s ease-out;
        }

        #closeBtn {
            width: 100vw;
            height: 32px;
            border-radius: 10px 10px 0px 0px;
            transition: background-color 0.2s, transform 0.3s ease-in-out;
        }

        #closeBtn:hover {
            background-color: #cccccc;
        }

        .mdc-list {
            padding: 0 0 !important;
        }

        #closeBtn:active {
            background-color: #999999
        }

        #closeBtn.active {
            background-color: #FADCBB
        }

        #loading {
            width: 96px;
            position: absolute;
            margin: auto;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
        }

        #setFrame {
            max-width: 600px;
            margin: auto;
            padding: 100%;
            width: 100%;
            height: calc(100% - 32px);
        }

        body {
            overflow-y: hidden;
            position: fixed;
            height: 100%;
            overflow-x: hidden;
            width: 100vw;
            animation: rightin 0.12s;
        }

        .bigBackground {
            background-image: url(./img/大塔.webp);
            background-repeat: no-repeat;
            background-size: auto 100vh;
            background-position: center;
        }

        @media (min-width: 700px) {
            #settings {
                display: flex !important;
                flex-direction: row !important;
            }

            .checkBoxList,
            .menuList {
                width: 50vw !important;
            }
        }
    </style>
</head>

<body>
    <div class="navbar">
        <button onclick="playOutAnim();" class="mdc-button foo-button">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">返回</span>
        </button>
        <H3 style="margin:auto;" id="titleText">设置</H3>
        <button onclick="showFrameSet('settingFrame/about');" class="mdc-button foo-button">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">关于</span>
        </button>
    </div>

    <div id="settings" style="padding-top:36px;height:100%;overflow-y: auto;overflow-y: overlay;">
        <ul class="mdc-list mdc-list--two-line checkBoxList">
            <li class="mdc-list-item" tabindex="0" id="blurCheck">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">全屏模糊模式</span>
                    <span class="mdc-list-item__secondary-text">使用全屏模糊替代菜单局部模糊，有性能损失</span>
                </span>
                <div class="mdc-checkbox" style="position:absolute;float:right;right:0px;">
                    <input type="checkbox" class="mdc-checkbox__native-control" id="blurCheckbox" />
                    <div class="mdc-checkbox__background">
                        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                            <path class="mdc-checkbox__checkmark-path" fill="none"
                                d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                        </svg>
                        <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                    <div class="mdc-checkbox__ripple"></div>
                </div>
            </li>
            <li class="mdc-list-item" id="randomCheck">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">使用列表随机模式</span>
                    <span class="mdc-list-item__secondary-text">替代真随机模式，减少重复可能性</span>
                </span>
                <div class="mdc-checkbox" style="position:absolute;float:right;right:0px;">
                    <input type="checkbox" class="mdc-checkbox__native-control" id="randomCheckbox" />
                    <div class="mdc-checkbox__background">
                        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                            <path class="mdc-checkbox__checkmark-path" fill="none"
                                d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                        </svg>
                        <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                    <div class="mdc-checkbox__ripple"></div>
                </div>
            </li>
            <li class="mdc-list-item" id="pushCheck">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">启用直播推送</span>
                    <span class="mdc-list-item__secondary-text">检测到直播时推送通知</span>
                </span>
                <div class="mdc-checkbox" style="position:absolute;float:right;right:0px;">
                    <input type="checkbox" class="mdc-checkbox__native-control" id="pushCheckbox" />
                    <div class="mdc-checkbox__background">
                        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                            <path class="mdc-checkbox__checkmark-path" fill="none"
                                d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                        </svg>
                        <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                    <div class="mdc-checkbox__ripple"></div>
                </div>
            </li>
            <li class="mdc-list-item" id="clientCheck">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">用客户端看直播</span>
                    <span class="mdc-list-item__secondary-text" id="clientDescription">调用B站官方APP/UWP客户端</span>
                </span>
                <div class="mdc-checkbox" style="position:absolute;float:right;right:0px;">
                    <input type="checkbox" class="mdc-checkbox__native-control" id="clientCheckbox" />
                    <div class="mdc-checkbox__background">
                        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                            <path class="mdc-checkbox__checkmark-path" fill="none"
                                d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                        </svg>
                        <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                    <div class="mdc-checkbox__ripple"></div>
                </div>
            </li>
            <li class="mdc-list-item" id="directLiveCheck" style="display:none;">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">自动切换到直播（壁纸模式）</span>
                    <span class="mdc-list-item__secondary-text">直播开始时自动从播放器切换到直播</span>
                </span>
                <div class="mdc-checkbox" style="position:absolute;float:right;right:0px;">
                    <input type="checkbox" class="mdc-checkbox__native-control" id="directLiveCheckbox" />
                    <div class="mdc-checkbox__background">
                        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                            <path class="mdc-checkbox__checkmark-path" fill="none"
                                d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                        </svg>
                        <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                    <div class="mdc-checkbox__ripple"></div>
                </div>
            </li>
            <li class="mdc-list-item" id="codecCheck">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">Codec Boost</span>
                    <span class="mdc-list-item__secondary-text">解决播放卡顿，只要不卡顿就别开</span>
                </span>
                <div class="mdc-checkbox" style="position:absolute;float:right;right:0px;">
                    <input type="checkbox" class="mdc-checkbox__native-control" id="codecCheckbox" />
                    <div class="mdc-checkbox__background">
                        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                            <path class="mdc-checkbox__checkmark-path" fill="none"
                                d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                        </svg>
                        <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                    <div class="mdc-checkbox__ripple"></div>
                </div>
            </li>
            <li class="mdc-list-item" id="wasmCheck">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">WASM播放模式</span>
                    <span class="mdc-list-item__secondary-text">解决苹果系设备无法播放的问题</span>
                </span>
                <div class="mdc-checkbox" style="position:absolute;float:right;right:0px;">
                    <input type="checkbox" class="mdc-checkbox__native-control" id="wasmCheckbox" />
                    <div class="mdc-checkbox__background">
                        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                            <path class="mdc-checkbox__checkmark-path" fill="none"
                                d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                        </svg>
                        <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                    <div class="mdc-checkbox__ripple"></div>
                </div>
            </li>
            <li class="mdc-list-item" id="fileCheck">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">分享文件</span>
                    <span class="mdc-list-item__secondary-text">分享音频文件而不是链接</span>
                </span>
                <div class="mdc-checkbox" style="position:absolute;float:right;right:0px;">
                    <input type="checkbox" class="mdc-checkbox__native-control" id="fileCheckbox" />
                    <div class="mdc-checkbox__background">
                        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                            <path class="mdc-checkbox__checkmark-path" fill="none"
                                d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                        </svg>
                        <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                    <div class="mdc-checkbox__ripple"></div>
                </div>
            </li>
            <li class="mdc-list-item" id="splashCheck">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">跳过开屏</span>
                    <span class="mdc-list-item__secondary-text">不再显示开屏页面</span>
                </span>
                <div class="mdc-checkbox" style="position:absolute;float:right;right:0px;">
                    <input type="checkbox" class="mdc-checkbox__native-control" id="splashCheckbox" />
                    <div class="mdc-checkbox__background">
                        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                            <path class="mdc-checkbox__checkmark-path" fill="none"
                                d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                        </svg>
                        <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                    <div class="mdc-checkbox__ripple"></div>
                </div>
            </li>
            <li class="mdc-list-item" id="animCheck">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">禁用动画效果</span>
                    <span class="mdc-list-item__secondary-text">有助于改善性能并减少视觉刺激</span>
                </span>
                <div class="mdc-checkbox" style="position:absolute;float:right;right:0px;">
                    <input type="checkbox" class="mdc-checkbox__native-control" id="animCheckbox" />
                    <div class="mdc-checkbox__background">
                        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                            <path class="mdc-checkbox__checkmark-path" fill="none"
                                d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                        </svg>
                        <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                    <div class="mdc-checkbox__ripple"></div>
                </div>
            </li>
            <li class="mdc-list-item" id="erudaCheck">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">开发者模式</span>
                    <span class="mdc-list-item__secondary-text">启用一些辅助开发的工具</span>
                </span>
                <div class="mdc-checkbox" style="position:absolute;float:right;right:0px;">
                    <input type="checkbox" class="mdc-checkbox__native-control" id="erudaCheckbox" />
                    <div class="mdc-checkbox__background">
                        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                            <path class="mdc-checkbox__checkmark-path" fill="none"
                                d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                        </svg>
                        <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                    <div class="mdc-checkbox__ripple"></div>
                </div>
            </li>
        </ul>
        <ul class="mdc-list mdc-list--two-line menuList">
            <li class="mdc-list-item" id="quizItem" style="display:none;background-color: blanchedalmond;">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">你有一份新的问卷可参与</span>
                    <span class="mdc-list-item__secondary-text">你的建议可以帮助545在线做得更好</span>
                </span>
            </li>
            <li class="mdc-list-item" onclick="showFrameSet('settingFrame/sortcdn/sortcdn')">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">CDN设置</span>
                    <span class="mdc-list-item__secondary-text">修改CDN优先级</span>
                </span>
            </li>
            <li class="mdc-list-item" onclick="showFrameSet('settingFrame/cache')">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">缓存管理</span>
                    <span class="mdc-list-item__secondary-text">清除缓存以释放设备空间</span>
                </span>
            </li>
            <li class="mdc-list-item" onclick="showFrameSet('settingFrame/import')">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">播放列表管理</span>
                    <span class="mdc-list-item__secondary-text">导入导出/全部缓存</span>
                </span>
            </li>
            <li class="mdc-list-item" onclick="showFrameSet('settingFrame/speedtest')">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">网络测速</span>
                    <span class="mdc-list-item__secondary-text">诊断网络问题并寻找最快节点</span>
                </span>
            </li>
            <li class="mdc-list-item" onclick="showFrameSet('settingFrame/quality')">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">音频质量指南</span>
                    <span class="mdc-list-item__secondary-text">了解本项目的音频质量及投稿须知</span>
                </span>
            </li>
            <li class="mdc-list-item" onclick="showFrameSet('settingFrame/privacy')">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">隐私须知</span>
                    <span class="mdc-list-item__secondary-text">了解琴梨梨将如何使用你的数据</span>
                </span>
            </li>
            <li class="mdc-list-item" onclick="showFrameSet('settingFrame/source')">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">开源许可</span>
                    <span class="mdc-list-item__secondary-text">了解有关本项目的开源信息</span>
                </span>
            </li>
            <li class="mdc-list-item" onclick="debugInfo();" id="debugMode">
                <span class="mdc-list-item__ripple"></span>
                <span class="mdc-list-item__text">
                    <span class="mdc-list-item__primary-text">诊断信息</span>
                    <span class="mdc-list-item__secondary-text">获取用于辅助琴梨梨修Bug的诊断信息</span>
                </span>
            </li>
        </ul>
    </div>
    <div id="floatMenuContainer">
        <div id="floatMenu">
            <img id="closeBtn" src="./img/expand.svg">
            <iframe id="setFrame" frameborder="0"></iframe>
            <img id="loading" src="./img/loading.webp">
        </div>
    </div>
    <script>
        if (localStorage.disableAnim ? JSON.parse(localStorage.disableAnim) : false) {
            var style = document.createElement('style');
            style.type = 'text/css';
            style.rel = 'stylesheet';
            style.appendChild(document.createTextNode(`*{transition:none !important;}`));
            document.getElementsByTagName('head')[0].appendChild(style);
        };
        window.isBiliLite = false;
        const $ = text => {
            if (text == '.h5-download-bar') {
                window.isBiliLite = true;
                const biliLiteHook = {
                    hide: () => {
                        console.log("BiliLite detected, enable extension functions...")
                        document.getElementById("clientCheckbox").checked = true;
                        document.getElementById("clientCheckbox").disabled = true;
                        document.getElementById("clientDescription").innerText = "已检测到BiliLite客户端";
                        document.getElementById("clientCheck").addEventListener("click", (e) => {
                            e.stopPropagation();
                        }, true);
                        document.getElementById("pushCheck").style.display = "none";
                        document.getElementById("fileCheck").style.display = "none";
                        document.getElementById("directLiveCheck").style.display = "none";
                        window.removeEventListener('resize', showDirectLive);
                    }
                };
                return biliLiteHook;
            }
        }
        const sleep = delay => new Promise((resolve) => setTimeout(resolve, delay));
        const playOutAnim = async () => {
            document.body.style.animation = "rightout 0.12s";
            document.body.style.marginLeft = "100%";
            await sleep(75);
            history.go(-1);
            setTimeout(() => {
                location.replace("./")
            }, 200)
        }
        window.mdc.autoInit();
        document.querySelectorAll('.foo-button').forEach(element => {
            mdc.ripple.MDCRipple.attachTo(element);
        });
        const MDCList = mdc.list.MDCList;
        const MDCRipple = mdc.ripple.MDCRipple;
        const MDCSwitch = mdc.switchControl.MDCSwitch;
        window.MDCCheckbox = mdc.checkbox.MDCCheckbox;
        document.querySelectorAll('.mdc-checkbox').forEach(element => {
            new MDCCheckbox(element);
        });
        let list = new MDCList(document.querySelector('.checkBoxList'));
        list.listElements.map((listItemEl) => new MDCRipple(listItemEl));
        list = new MDCList(document.querySelector('.menuList'));
        list.listElements.map((listItemEl) => new MDCRipple(listItemEl));
        document.title = "545在线-设置";
        const debugInfo = () => {
            function getVideoCardInfo() {
                const gl = document.createElement('canvas').getContext('webgl');
                if (!gl) {
                    return false;
                }
                const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
                return debugInfo ? {
                    vendor: gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL),
                    renderer: gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL),
                } : false;
            }
            let GPUinfo = getVideoCardInfo();
            let GPUname = "No GPU";
            if (GPUinfo) {
                GPUname = GPUinfo.renderer;
                if (GPUinfo.renderer.indexOf("ANGLE") == 0) {
                    GPUname = GPUname.substring(GPUname.indexOf(",") + 2, GPUname.indexOf("Direct3D") - 1);
                }
                console.log(GPUname);
            } else {
                console.log("Cannot Get GPU Info!")
            }
            let copyInfo = {
                UA: navigator.userAgent,
                GPU: GPUname
            }
            try {
                navigator.clipboard.writeText(Base64.encode(JSON.stringify(copyInfo)))
                alert("成功复制诊断数据，请发送给琴梨梨！")
            } catch (e) {
                console.log(e)
                alert("写入诊断数据到剪贴板失败！")
            }
        }
        document.getElementById("debugMode").addEventListener('long-press', (e) => {
            e.stopPropagation();
            e.preventDefault();
            if (confirm("你真的要进行性能测试么？\n测试过程中设备将一段时间不会响应操作\n性能测试只代表设备性能，不能协助解决非性能问题")) {
                let startTime = Date.now()
                for (let i = 0; i <= 10000; i++) {
                    let temp = document.createElement("canvas");
                    let ctx = temp.getContext("2d");
                    ctx.fillText("琴梨梨", 0, 0);
                }
                let endTime = Date.now();
                alert("性能测试完成，用时" + (endTime - startTime) + "ms");
            }
        });
        const rebuildFrame = url => {
            if (document.getElementById("setFrame")) {
                document.getElementById("floatMenu").removeChild(document.getElementById("setFrame"));
            };
            let newFrame = document.createElement("iframe");
            newFrame.id = "setFrame";
            newFrame.frameBorder = 0;
            document.getElementById("closeBtn").insertAdjacentElement("afterend", newFrame)
            newFrame.src = url;
            newFrame.addEventListener("load", () => {
                document.getElementById("loading").style.display = "none";
                newFrame.style.padding = "0px";
            });
        }
        window.addEventListener("message", async (event) => {
            console.log(event.data)
            if (event.data == "close") {
                document.getElementById("floatMenuContainer").style.opacity = 0;
                document.getElementById("floatMenu").style.marginTop = "100vh";
                await sleep(500);
                document.getElementById("floatMenuContainer").style.display = "none";
                if (window.CloseWatcher) {
                    window.FrameBack.destroy();
                }
            }
            if (event.data.startsWith("http")) {
                document.getElementById("loading").style.display = "block";
                rebuildFrame(event.data);
            }
        }, false);
        if (localStorage.fullBlur && JSON.parse(localStorage.fullBlur)) {
            document.getElementById("floatMenuContainer").style.backdropFilter = "blur(3px) brightness(100%)";
            document.getElementById("floatMenuContainer").setAttribute("style", document.getElementById("floatMenuContainer").getAttribute("style") + "-webkit-backdrop-filter:blur(3px) brightness(100%)");
        };
        const showFrameSet = async url => {
            //使用iframe渲染设置
            document.getElementById("floatMenuContainer").style.display = "block";
            await sleep(1);
            document.getElementById("floatMenuContainer").style.opacity = 1;
            document.getElementById("floatMenu").style.marginTop = "10vh";
            document.getElementById("loading").style.display = "block";
            rebuildFrame(url);
            if (window.CloseWatcher) {
                window.FrameBack = new CloseWatcher();
                FrameBack.onclose = async () => {
                    document.getElementById("floatMenu").style.marginTop = "100vh";
                    document.getElementById("floatMenuContainer").style.opacity = 0;
                    await sleep(500);
                    document.getElementById("floatMenuContainer").style.display = "none";
                };
            }
        }
        document.getElementById("closeBtn").addEventListener("click", async (event) => {
            event.stopPropagation();
            document.getElementById("floatMenu").style.marginTop = "100vh";
            document.getElementById("floatMenuContainer").style.opacity = 0;
            await sleep(500);
            document.getElementById("floatMenuContainer").style.display = "none";
            if (window.CloseWatcher) {
                window.FrameBack.destroy();
            }
        })
        if (localStorage.randomMethod == "list") {
            document.getElementById("randomCheckbox").checked = true;
        }
        document.getElementById("randomCheckbox").addEventListener("change", () => {
            if (document.getElementById("randomCheckbox").checked) {
                localStorage.randomMethod = "list";
            } else {
                localStorage.randomMethod = "default";
            }
        }, false)
        const checkBoth = () => {
            if (document.getElementById("codecCheckbox").checked && document.getElementById("wasmCheckbox").checked) {
                alert("Codec Boost和WASM播放器是互斥的\n同时勾选两者会导致播放异常");
            }
        }
        const initCheckbox = (storageName, boxName) => {
            if (localStorage[storageName]) {
                document.getElementById(boxName).checked = JSON.parse(localStorage[storageName]);
            }
            document.getElementById(boxName).addEventListener("change", () => {
                localStorage[storageName] = document.getElementById(boxName).checked;
                checkBoth()
            }, false);
        };
        initCheckbox("fullBlur", "blurCheckbox");
        initCheckbox("codecBoost", "codecCheckbox");
        initCheckbox("livePush", "pushCheckbox");
        initCheckbox("wasmPlayer", "wasmCheckbox");
        initCheckbox("fileShare", "fileCheckbox");
        initCheckbox("erudaEnabled", "erudaCheckbox");
        initCheckbox("directLive", "directLiveCheckbox");
        initCheckbox("clientLive", "clientCheckbox");
        initCheckbox("skipSplash", "splashCheckbox");
        initCheckbox("disableAnim", "animCheckbox");
        const showDirectLive = () => {
            if (window.innerWidth > window.innerHeight && window.innerHeight > 600 || !(window.self === window.top)) {
                document.getElementById("directLiveCheck").style.display = "flex";
            } else {
                document.getElementById("directLiveCheck").style.display = "none";
            };
        }
        showDirectLive();
        window.addEventListener('resize', showDirectLive, false);
        window.titleCount = 0;
        document.getElementById("titleText").addEventListener("click", () => {
            window.titleCount++;
            if (window.titleCount == 5) {
                document.getElementById("settings").className = "bigBackground";
            }
        });
        (async () => {
            let quizJson = await (await fetch("./quiz.json?ForceNoCache=1")).json();
            if (quizJson.success) {
                if (!(localStorage.lastQuiz == quizJson.quiz_ver)) {
                    let quizItem = document.getElementById("quizItem");
                    quizItem.style.display = "block";
                    quizItem.addEventListener("click", () => {
                        showFrameSet(quizJson.quiz_url);
                        localStorage.lastQuiz = quizJson.quiz_ver;
                        quizItem.style.display = "none";
                    })
                }
            }
        })();
        (() => {
            if (localStorage.erudaEnabled && JSON.parse(localStorage.erudaEnabled)) {
                let script = document.createElement('script');
                script.src = "https://lib.baomitu.com/eruda/2.4.1/eruda.min.js";
                document.body.appendChild(script);
                script.onload = function () {
                    eruda.init()
                }
            }
        })();
        if (location.search.length) {
            showFrameSet("settingFrame/" + location.search.substr(1))
        };
    </script>
</body>

</html>